home *** CD-ROM | disk | FTP | other *** search
/ Rock County Sheriff's Off…nternet Safety Initative / Rock County Sher.iso / pc / css / styles / jquery.jPlayer.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2012-09-13  |  9.6 KB  |  474 lines
  1. div.jp-audio, 
  2. div.jp-video {
  3.     color:#a7a7a7;
  4.     line-height:2.2em;
  5.     position:relative;
  6.     z-index:10;
  7. }
  8.  
  9. div.jp-audio {width:100%;}
  10.  
  11. div.jp-video.fullwidth, 
  12. div.jp-video.fullwidth .jp-type-list-parent {
  13.     width:100%;
  14.     height:0;
  15.     padding-bottom:56.25%;
  16.     position:relative;
  17.     overflow:hidden;
  18. }
  19.  
  20. div.jp-video.fullwidth.playlist {
  21.     height:auto;
  22.     padding-bottom:0;
  23. }
  24.  
  25. div.jp-video.fullwidth .jp-type-single, 
  26. div.jp-video.fullwidth .jp-type-list {
  27.     width:100%;
  28.     height:100%;
  29.     position:absolute;
  30.     top:0;
  31.     left:0;
  32. }
  33.  
  34. div.jp-video-full {
  35.     width:100%;
  36.     height:100%;
  37.     position:static !important;
  38.     position:relative
  39. }
  40.  
  41. div.jp-video-full div.jp-jplayer {
  42.     overflow:hidden;
  43.     position:fixed;
  44.     top:0;
  45.     left:0;
  46.     z-index:1000;
  47. }
  48.  
  49. div.jp-video-full div.jp-gui {
  50.     width:100%;
  51.     height:100%;
  52.     position:fixed;
  53.     top:0;
  54.     left:0;
  55.     z-index:1000;
  56. }
  57.  
  58. div.jp-video-full div.jp-interface {
  59.     position:absolute;
  60.     bottom:0;
  61.     left:0;
  62.     z-index:1000;
  63. }
  64.  
  65. div.jp-interface {
  66.     background:#404040 url(../../images/jPlayer/jp_bg.png) 0 7px repeat-x;
  67.     width:100%;
  68.     height:35px;
  69.     overflow:hidden;
  70.     position:relative;
  71.     transition:opacity .5s ease-in-out, margin .5s ease-in-out;
  72.     -moz-transition:opacity .5s ease-in-out, margin .5s ease-in-out;
  73.     -webkit-transition:opacity .5s ease-in-out, margin .5s ease-in-out;
  74.     -o-transition:opacity .5s ease-in-out, margin .5s ease-in-out;
  75.     -ms-transition:opacity .5s ease-in-out, margin .5s ease-in-out;
  76. }
  77.  
  78. div.jp-interface li {padding-left:0;}
  79.  
  80. div.jp-video div.jp-interface {
  81.     margin:0;
  82.     opacity:0;
  83.     filter:alpha(opacity=0);
  84. }
  85.  
  86. div.jp-video:hover div.jp-interface {
  87.     margin:-35px 0 0;
  88.     opacity:1;
  89.     filter:alpha(opacity=100);
  90. }
  91.  
  92. div.jp-controls-holder {
  93.     width:100%;
  94.     overflow:hidden;
  95.     position:absolute;
  96.     top:7px;
  97.     left:0;
  98. }
  99.  
  100. div.jp-interface ul.jp-controls {
  101.     list-style-type:none;
  102.     margin:0;
  103.     padding: 0;
  104.     overflow:hidden;
  105. }
  106.  
  107. ul.jp-controls, 
  108. div.jp-interface ul.jp-controls li {
  109.     display:inline;
  110.     float:left;
  111. }
  112.  
  113. div.jp-interface ul.jp-controls a {
  114.     background:url(../../images/jPlayer/jp_bg.png) 100% -28px no-repeat;
  115.     display:block;
  116.     padding-right:2px;
  117.     overflow:hidden;
  118.     text-indent:-9999px;
  119. }
  120.  
  121. div.jp-interface ul.jp-controls a span {
  122.     display:block;
  123.     overflow:hidden;
  124.     text-indent:-9999px;
  125. }
  126.  
  127. a.jp-play span, 
  128. a.jp-pause span {
  129.     width:28px;
  130.     height:28px;
  131. }
  132.  
  133. a.jp-play span {background:url(../../images/jPlayer/jp_sprite.png) 0 0 no-repeat;}
  134.  
  135. a.jp-play:hover span {background-position:-28px 0;}
  136.  
  137. a.jp-pause span {
  138.     background:url(../../images/jPlayer/jp_sprite.png) 0 -28px no-repeat;
  139.     display:none;
  140. }
  141.  
  142. a.jp-pause:hover span {background-position:-28px -28px;}
  143.  
  144. a.jp-stop span, 
  145. a.jp-previous span, 
  146. a.jp-next span {
  147.     width:28px;
  148.     height:28px;
  149. }
  150.  
  151. a.jp-stop span {background:url(../../images/jPlayer/jp_sprite.png) 0 -56px no-repeat;}
  152.  
  153. a.jp-stop:hover span {background-position:-28px -56px;}
  154.  
  155. a.jp-previous span {background: url(../../images/jPlayer/jp_sprite.png) -56px -28px no-repeat;}
  156.  
  157. a.jp-previous:hover span {background-position:-84px -28px;}
  158.  
  159. a.jp-next span {background:url(../../images/jPlayer/jp_sprite.png) -56px 0 no-repeat;}
  160.  
  161. a.jp-next:hover span {background-position:-84px 0;}
  162.  
  163. div.jp-progress {
  164.     background-color:#303030;
  165.     width:100%;
  166.     height:7px;
  167.     overflow:hidden;
  168.     position:absolute;
  169.     top:0;
  170.     left:0;
  171. }
  172.  
  173. div.jp-seek-bar {
  174.     width:0;
  175.     height:100%;
  176.     cursor:pointer;
  177.     box-shadow:inset 0 0 2px #464444;
  178.     -moz-box-shadow:inset 0 0 2px #464444;
  179.     -webkit-box-shadow:inset 0 0 2px #464444;
  180. }
  181.  
  182. div.jp-play-bar {
  183.     background-color:#101010;
  184.     background:#101010 linear-gradient(#cecece, #9d9d9d) 0 -1px repeat-x;
  185.     background:#101010 -moz-linear-gradient(#cecece, #9d9d9d) 0 -1px repeat-x;
  186.     background:#101010 -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#9d9d9d));
  187.     background:#101010 -webkit-linear-gradient(#cecece, #9d9d9d) 0 -1px repeat-x;
  188.     background:#101010 -o-linear-gradient(#cecece, #9d9d9d) 0 -1px repeat-x;
  189.     width:0;
  190.     height:100%;
  191. }
  192.  
  193. div.jp-seeking-bg {background:url(../../images/jPlayer/jp_load.gif) 0 0 repeat-x;}
  194.  
  195. a.jp-mute, 
  196. a.jp-unmute, 
  197. a.jp-volume-max {position:relative;}
  198.  
  199. a.jp-mute, 
  200. a.jp-unmute {margin:0 60px 0 0;}
  201.  
  202. a.jp-mute span {background:url(../../images/jPlayer/jp_sprite.png) 0 -84px no-repeat;}
  203.  
  204. a.jp-mute:hover span {background-position:-28px -84px;}
  205.  
  206. a.jp-unmute span {
  207.     background:url(../../images/jPlayer/jp_sprite.png) 0 -112px no-repeat;
  208.     display:none;
  209. }
  210.  
  211. a.jp-unmute:hover span {background-position:-28px -112px;}
  212.  
  213. div.jp-volume-bar {
  214.     background-color:#202020;
  215.     width:50px;
  216.     height:7px;
  217.     overflow:hidden;
  218.     position:absolute;
  219.     top:10px;
  220.     right:38px;
  221.     cursor:pointer;
  222.     z-index:2;
  223.     box-shadow:1px 1px 0 #464444;
  224.     -moz-box-shadow:1px 1px 0 #464444;
  225.     -webkit-box-shadow:1px 1px 0 #464444;
  226.     border-radius:3px;
  227.     -moz-border-radius:3px;
  228.     -webkit-border-radius:3px;
  229. }
  230.  
  231. div.jp-audio div.jp-volume-bar {right:8px;}
  232.  
  233. div.jp-volume-bar-value {
  234.     background-color:#747474;
  235.     background:linear-gradient(#848484, #646464);
  236.     background:-moz-linear-gradient(#848484, #646464);
  237.     background:-webkit-gradient(linear, left top, left bottom, from(#848484), to(#646464));
  238.     background:-webkit-linear-gradient(#848484, #646464);
  239.     background:-o-linear-gradient(#848484, #646464);
  240.     width:0;
  241.     height:7px;
  242. }
  243.  
  244. div.jp-current-time, 
  245. div.jp-time-sep, 
  246. div.jp-duration {
  247.     font-size:0.8em;
  248.     margin-top:5px;
  249. }
  250.  
  251. div.jp-current-time {
  252.     color:#ffffff;
  253.     display:inline;
  254.     float:right;
  255. }
  256.  
  257. div.jp-time-sep {
  258.     text-align:center;
  259.     display:inline;
  260.     float:right;
  261.     margin-right:5px;
  262.     margin-left:5px;
  263. }
  264.  
  265. div.jp-duration {
  266.     text-align:right;
  267.     display:inline;
  268.     float:right;
  269.     margin-right:130px;
  270. }
  271.  
  272. div.jp-audio div.jp-duration {margin-right:100px;}
  273.  
  274. div.jp-title {
  275.     font-weight:bold;
  276.     text-align:center;
  277.     display:none;
  278. }
  279.  
  280. div.jp-title, 
  281. div.jp-playlist {width:100%;}
  282.  
  283. div.jp-type-single div.jp-title, 
  284. div.jp-type-playlist div.jp-title, 
  285. div.jp-type-single div.jp-playlist {border-top:none;}
  286.  
  287. div.jp-title ul, 
  288. div.jp-playlist ul {
  289.     list-style-type:none;
  290.     padding:0;
  291.     margin:0;
  292. }
  293.  
  294. div.jp-title li {
  295.     font-weight:bold;
  296.     padding:5px 0;
  297. }
  298.  
  299. div.jp-video-full div.jp-title li {padding:1px 0;}
  300.  
  301. div.jp-playlist li {
  302.     background-color:#414141;
  303.     position:relative;
  304.     margin-bottom:2px;
  305. }
  306.  
  307. div.jp-playlist li a {
  308.     display:block;
  309.     padding-bottom: 8px;
  310.     padding-left: 45px;
  311.     padding-top: 8px;    
  312.     border-top:1px solid #515151;    
  313. }
  314.  
  315. div.jp-playlist li.jp-playlist-current:before {
  316.     content:'';
  317.     border-radius:50%;
  318.     -moz-border-radius:50%;
  319.     -webkit-border-radius:50%;
  320.     -o-border-radius:50%;
  321.     background-image:url(../../images/jp_playlist_grad_bg.png);
  322.     width:11px;
  323.     height:11px;
  324.     position:absolute;
  325.     left:20px;
  326.     top:15px;
  327.     box-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);
  328.     -moz-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);
  329.     -webkit-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);
  330.     -o-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.2);
  331. }
  332.  
  333. div.jp-playlist li div {display:inline;}
  334.  
  335. div.jp-playlist a.jp-playlist-item-remove {
  336.     color:#666666;
  337.     font-weight:bold;
  338.     text-align:right;
  339.     display:inline;
  340.     float:right;
  341.     margin-right:10px;
  342. }
  343.  
  344. div.jp-playlist a.jp-playlist-item-remove:hover {color:#0d88c1;}
  345.  
  346. div.jp-playlist span.jp-free-media {
  347.     text-align:right;
  348.     display:inline;
  349.     float:right;
  350.     margin-right:10px;
  351. }
  352.  
  353. div.jp-playlist span.jp-free-media a{color:#666666;}
  354.  
  355. div.jp-playlist span.jp-free-media a:hover{color:#0d88c1;}
  356.  
  357. span.jp-artist {
  358.     color:#666666;
  359.     font-size:.9em;
  360. }
  361.  
  362. div.jp-video-play {
  363.     background-color:rgba(0, 0, 0, 0);
  364.     width:100%;
  365.     height:100%;
  366.     position:absolute;
  367.     top:0;
  368.     left:0;
  369.     cursor:pointer;
  370. }
  371.  
  372. div.jp-video-full div.jp-video-play {
  373.     height:100%;
  374.     z-index:1000;
  375. }
  376.  
  377. a.jp-video-play-icon {
  378.     background:url(../../images/jPlayer/jp_play.png) 0 0 no-repeat;
  379.     display:block;
  380.     width:80px;
  381.     height:50px;
  382.     margin-left:-40px;
  383.     margin-top:-25px;
  384.     position:absolute;
  385.     left:50%;
  386.     top:50%;
  387.     text-indent:-9999px;
  388.     opacity:0.7;
  389.     filter:alpha(opacity=70);
  390.     -webkit-transition:opacity .5s ease-in-out;
  391.     -moz-transition:opacity .5s ease-in-out;
  392.     -ms-transition:opacity .5s ease-in-out;
  393.     -o-transition:opacity .5s ease-in-out;
  394.     transition:opacity .5s ease-in-out;
  395. }
  396.  
  397. div.jp-video-play:hover a.jp-video-play-icon {
  398.     opacity:1;
  399.     filter:alpha(opacity=100);
  400. }
  401.  
  402. div.jp-jplayer audio, 
  403. div.jp-jplayer {
  404.     width:0;
  405.     height:0;
  406. }
  407.  
  408. div.jp-jplayer {background-color:#000000;}
  409.  
  410. ul.jp-toggles {
  411.     list-style-type:none;
  412.     float:right;
  413.     padding:0;
  414.     margin:0 auto;
  415.     overflow:hidden;
  416.     z-index:1;
  417. }
  418.  
  419. ul.jp-toggles li {
  420.     display:block;
  421.     float:left;
  422. }
  423.  
  424. ul.jp-toggles li a {
  425.     background:url(../../images/jPlayer/jp_bg.png) -8px -28px no-repeat;
  426.     padding-left:2px;
  427. }
  428.  
  429. ul.jp-toggles li a, 
  430. ul.jp-toggles li a span {
  431.     display:block;
  432.     width:28px;
  433.     height:28px;
  434.     text-indent:-9999px;
  435. }
  436.  
  437. a.jp-full-screen span {background:url(../../images/jPlayer/jp_sprite.png) -56px -56px no-repeat;}
  438.  
  439. a.jp-full-screen:hover span {background-position:-84px -56px;}
  440.  
  441. a.jp-restore-screen span {background:url(../../images/jPlayer/jp_sprite.png) -56px -84px no-repeat;}
  442.  
  443. a.jp-restore-screen:hover span {background-position:-84px -84px;}
  444.  
  445. .jp-no-solution {
  446.     border:2px solid #009be3;
  447.     background-color:#404040;
  448.     color:#000000;
  449.     font-size:.8em;
  450.     display:none;
  451.     width:390px;
  452.     padding:5px;
  453.     margin-left:-202px;
  454.     position:absolute;
  455.     left:50%;
  456.     top: 10px;
  457. }
  458.  
  459. .jp-no-solution a {color:#000000;}
  460.  
  461. .jp-no-solution span {
  462.     font-size:1em;
  463.     font-weight:bold;
  464.     text-align:center;
  465.     display:block;
  466. }
  467.  
  468. div.jp-video.fullwidth .jp-jplayer img, 
  469. div.jp-video.fullwidth .jp-jplayer object {
  470.     left: 0;
  471.     position: absolute;
  472.     top: 0;
  473. }
  474.